<script setup>
import {h, ref, inject} from "vue";
import {NIcon} from "naive-ui";
import noteCommunal from "@/components/communal/note-communal.vue";
const {toPage} = inject("toPage")
import {createCollect, createNoteNull, getRecentNote, getViewsNote, selAllCollectByUuid} from "@/res/api/note_api.js";

let showModal = ref(false)
let bodyStyle= {
  width: "36rem"
}
let segmented= {
  content: "soft",
  footer: "soft"
}
// 创建笔记的名称
let noteName = ref(null)
const formData = new FormData();
//图片上传
const customRequest = ({
                         file,
                         data,
                         headers,
                         withCredentials,
                         action,
                         onFinish,
                         onError,
                         onProgress
                       })=>{
  if (data) {
    Object.keys(data).forEach((key) => {
      formData.append(
          key,
          data[key]
      );
    });
  }
  formData.append("file", file.file);
}
//笔记创建
function noteCreateClick(){
  formData.append("noteName", noteName.value)
  console.log(formData.get('file'))
  if (noteName.value == null || noteName.value == ""){
    $message.destroyAll()
    $message.warning("笔记名称不能为空")
    return
  }
  createNoteNull({
    file: formData.get('file')!==null?formData.get('file'):"",
    noteName: noteName.value
  }).then((res)=>{
    console.log(res)
    noteName.value = null;
    showModal.value = false
  }).catch((err)=>{
    $message.success(err.message);
  })
}

// 创建收藏夹
let collectName = ref(null)
let showModal_collect = ref(false)
function collectCreateClick(){
  if (collectName.value == null || collectName.value == ""){
    $message.destroyAll()
    $message.warning("笔记名称不能为空")
    return
  }
  createCollect({
    collectName: collectName.value
  }).then((res)=> {
    console.log(res)
    collectName.value = null
    showModal_collect.value = false
    window.location.reload()
  }).catch((err)=> {
    $message.error(err.message);
  })
}

// 得到最近编辑
let recentNoteRef = ref([])
//控制状态
let  viewNote = ref(true)
function recentNote(){
  viewNote.value=true
  getRecentNote({
    pageSize: 1,
    pageNum: 5
  }).then((res)=> {
    console.log(res.data.list)
    recentNoteRef.value = res.data.list
  }).catch((err)=> {
    $message.error(err.message);
  })
}
recentNote()

// 得到最近浏览
function getNoteView(){
  viewNote.value = false
  getViewsNote({
    pageSize: 1,
    pageNum: 5
  }).then((res)=> {
    console.log(res)
    recentNoteRef.value = res.data.list
  }).catch((err)=> {
    $message.error(err.message);
  })
}

// 查询用户所有收藏夹
let collectRef = ref([])
selAllCollectByUuid({
  pageSize: 1,
  pageNum: 10
}).then((res)=> {
  console.log(res)
  collectRef.value = res.data.list
}).catch((err)=> {
  $message.error(err.message);
})
</script>

<template>
  <note-communal action-key="note-home">
    <n-flex class="note-content" vertical>
      <n-flex vertical>
        <p class="note-title" style="margin-top: 1.2rem">开始 start</p>
        <n-space>
          <n-button type="info" @click="showModal = true">创建笔记</n-button>
          <n-button type="info" @click="showModal_collect = true">创建收藏夹</n-button>
        </n-space>
        <n-divider/>
      </n-flex>
      <n-flex vertical>
        <p class="note-title">文档 document</p>
        <n-space>
          <n-button text @click="recentNote">
            <template #icon>
              <n-icon>
                i
              </n-icon>
            </template>
            最新编辑
          </n-button>
          <n-button text @click="getNoteView">
            <template #icon>
              <n-icon>
                i
              </n-icon>
            </template>
            最近浏览
          </n-button>
        </n-space>
        <n-list v-if="viewNote" hoverable clickable class="ant">
          <n-list-item>
            <n-space justify="space-between">
              <n-p>名称</n-p>
              <n-p>创建时间</n-p>
              <n-p>编辑时间</n-p>
            </n-space>
          </n-list-item>
          <n-list-item v-for="(item,index) in recentNoteRef" :key="index"
                       @click="toPage('std/note/write',{noteId:item.id,noteTitle:item.notetitle,type:'note'}, false)">
            <n-space justify="space-between">
              <n-p>{{ item.notetitle }}</n-p>
              <n-p><n-time :time="item.createTime" format="yyyy-MM-dd hh:mm:ss" /></n-p>
              <n-p><n-time :time="item.updateTime" format="yyyy-MM-dd hh:mm:ss" /></n-p>
            </n-space>
          </n-list-item>
        </n-list>

        <n-list v-else hoverable clickable class="ant">
          <n-list-item>
            <n-space justify="space-between">
              <n-p>名称</n-p>
              <n-p>创建用户ID</n-p>
              <n-p>浏览量</n-p>
            </n-space>
          </n-list-item>
          <n-list-item v-for="(item,index) in recentNoteRef" :key="index" @click="toPage('std/note/show',null,false)">
            <n-space justify="space-between">
              <n-p>{{ item.notetitle }}</n-p>
              <n-p>{{ item.uuid }}</n-p>
              <n-p>{{ item.views }}</n-p>
            </n-space>
          </n-list-item>
        </n-list>
        <n-divider/>
      </n-flex>
      <n-flex vertical>
        <n-h3>我的收藏夹 - 文章</n-h3>
        <n-grid x-gap="9" y-gap="12" cols="1 s:2 m:3 l:3 xl:4 2xl:6" responsive="screen" >
          <n-gi v-for="(item, index) in collectRef" :key="index">
            <n-card   hoverable class="model-cart" @click="toPage('std/note/show/collect', {id: item.id, type:'posts'})">
              <template #cover>
                <n-image :src="item.collectImage" alt="..."/>
              </template>
              <n-space><span class="card-title">{{ item.collectName }}</span></n-space>
              <n-ellipsis :line-clamp="2" line-clamp="click" :style="{fontsize:'1rem'}">
                便捷保存和管理喜爱或常用的笔记/文章，快速访问，提升效率。
              </n-ellipsis>
            </n-card>
          </n-gi>
        </n-grid>
      </n-flex>
    </n-flex>
<!--    创建笔记的信息弹窗-->
    <n-modal
        v-model:show="showModal"
        class="custom-card"
        preset="card"
        :style="bodyStyle"
        title="笔记信息"
        size="huge"
        :bordered="false"
        :segmented="segmented"
        transform-origin="center"
    >
      <n-form-item label="笔记名称" label-placement="left">
        <n-input type="text" placeholder="请输入笔记名称" v-model:value="noteName"></n-input>
      </n-form-item>
      <n-form-item label="笔记封面" label-placement="left">
        <n-upload
            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
            max="1"
            multiple
            directory-dnd
            list-type="image-card"
            :custom-request="customRequest"
            @finish=""
        >
          点击上传
        </n-upload>
      </n-form-item>
      <template #footer>
        <n-space justify="center"><n-button type="info" @click="noteCreateClick">确 认 创 建</n-button></n-space>
      </template>
    </n-modal>

    <!--  创建收藏夹  -->
    <n-modal
        v-model:show="showModal_collect"
        class="custom-card"
        preset="card"
        :style="bodyStyle"
        title="收藏夹信息"
        size="huge"
        :bordered="false"
        :segmented="segmented"
        transform-origin="center"
    >
      <n-form-item label="收藏夹名称" label-placement="left">
        <n-input type="text" placeholder="请输入收藏夹名称" v-model:value="collectName"></n-input>
      </n-form-item>
      <template #footer>
        <n-space justify="center"><n-button type="info" @click="collectCreateClick">确 认 创 建</n-button></n-space>
      </template>
    </n-modal>
  </note-communal>
</template>

<style lang="scss" scoped>
.note-sider{

}
.note-content{

}
.note-title{
  font-weight: bold;
  font-size: 16px;
}
.ant{
  transition: .72s 0s ease-in-out all;
  animation-name: ant;
  animation-duration: 1s;
  animation-delay: 0.24s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
@keyframes ant {
  from {
    display: none;
  }
  to {
    display: block;
  }
}
.model-cart{
  width: 18rem;
  height: 16rem;
  &:nth-child(4n){
    position: absolute;
    right: 0;
  }
}
.card-title{
  position: relative;
  left: -1rem;
  font-size: 1rem;
  font-weight: bold;
}
</style>
